<template>
	<view class="running">
	<!-- 	<map
		style="width: 100%; height: 100%;" 
		:latitude="latitude"
		:longitude="longitude"
		:scale="scale"
		:markers="markers"
		:polyline="polylines"
		:show-location="true"
		v-if="showMap"
		></map> -->
		<map 
		style="width: 100%; height: 100%;" 
		:latitude="latitude"
		:longitude="longitude"
		scale="18"
		:markers="markers"
		:enable-satellite="true"
		:show-location="true"></map>
	</view>
</template>

<script>
	import amapFile from '../../lib/amap-wx.js'
	const pushLive = uni.requireNativePlugin('service-keep-live')
	export default {
		data() {
			return {
				showMap: false,
				longitude: 0,
				latitude: 0,
				scale: [30],
				markers: [],
				mapKey: 'cd119e66934999d66a32ad518f97dc2f',
				timer: null,
				polylines:[{
					points: [],
					arrowLine: true,
					dottedLine: true,
					width: 40,
					color: "FEAA34"
				}],//连续数组
				flag: false
			}
		},
		onHide() {
			console.log("onHide running")
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onLoad() {
			// this.goStartService();
			this.amapPlugin = new amapFile.AMapWX({
				key: this.mapKey  //该key 是在高德中申请的微信小程序key
			});
			// this.canverMap();
			this.map();
		},
		mounted() {
			const that = this
			// this.initData()
			setTimeout(() => {
				this.showMap = true;
			},300);
			// that.timer = setInterval(() => {
			// 	that.helloMap()
			// 	that.initData()
			// 	console.log("hello")
			// },3000)
		},
		methods: {
			//启动保活服务
			goStartService() {
				const that = this;
				let obj = {
					title: "高德导航",
					content: "正在后台运行",
					mode: 1 ,//0是省点模式 1流氓模式
					isShow:true  ,//true显示通知栏,false隐藏通知栏
				}
				pushLive.startService(obj, function(res) {
					console.log(res)
				});
				//判断是否加入白名单
				pushLive.isIgnoringBatteryOptimizations(function(res) {
					console.log(res);
					that.flag = res.flag;
					let flag = res.flag;
					if (flag == false) {
						//第二种 申请加入白名单，设置后台无限制，自启动（无需设置），设置电量优化
						pushLive.gotoBackstage_WhiteList_autStart()
					}
				})
			},
			helloMap() {
				const that = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						that.longitude = res.longitude
						that.latitude = res.latitude
						let obj = {
							latitude: res.latitude,
							longitude: res.longitude,
						}
						let points = that.polylines[0].points
						if (points.length === 0) {
							that.polylines[0].points.push(obj)
						} else {
							let length = points.length
							let oldLat = points[length - 1].latitude
							let oldLon = points[length - 1].longitude
							let latSub = Math.abs(res.latitude - oldLat)
							let lonSub = Math.abs(res.longitude - oldLon)
							if (latSub > 0.00015 || lonSub > 0.00015) {
								that.polylines[0].points.push(obj)
							}
						}
					}
				});
			},
			initData() {
				const that = this
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						that.longitude = res.longitude
						that.latitude = res.latitude
						let obj = {
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../static/image/map.png'
						}
						let markers = that.markers
						if (markers.length === 0) {
							that.markers.push(obj)
						} else {
							let length = markers.length
							let oldLat = markers[length - 1].latitude
							let oldLon = markers[length - 1].longitude
							let latSub = Math.abs(res.latitude - oldLat)
							let lonSub = Math.abs(res.longitude - oldLon)
							if (latSub > 0.00015 || lonSub > 0.00015) {
								that.markers.push(obj)
								console.log(that.markers)
							}
						}
					}
				});
			},
			canverMap() {
				const that = this
				that.amapPlugin.getRegeo({
					type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
					success: function(res) {
						const latitude = res[0].latitude;
						const longitude = res[0].longitude;
						that.longitude = longitude;
						that.latitude = latitude;
						that.mapInfo=res[0];
					},
					fail: (res) => {
						console.log(JSON.stringify(res));
					}
				});
				setInterval(() => {
					that.amapPlugin.getRegeo({
						type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
						success: function(res) {
							console.log(res)
							let obj = {
								"latitude": '',
								"longitude": '',
								"zIndex": "1",
								"iconPath": "/static/image/map.png",
								"width": 40,
								"height": 40
							}
							const latitude = res[0].latitude;
							const longitude = res[0].longitude;
							obj.latitude = latitude
							obj.longitude = longitude
							that.markers.push(obj)
							that.longitude = longitude;
							that.latitude = latitude;
							that.mapInfo=res[0];
						},
						fail: (res) => {
							console.log(JSON.stringify(res));
						}
					});
				},3000)
			},
			map() {
				const that = this
				uni.getLocation({
					success(res) {
						console.log(res)
					}
				})
				setInterval(() => {
					uni.getLocation({
						success(res) {
							console.log(res)
							let obj = {
								"latitude": '',
								"longitude": '',
								"zIndex": "1",
								"iconPath": "/static/image/map.png",
								"width": 40,
								"height": 40
							}
							const latitude = res.latitude;
							const longitude = res.longitude;
							obj.latitude = latitude
							obj.longitude = longitude
							that.markers.push(obj)
							that.longitude = longitude;
							that.latitude = latitude;
						}
					})
				},3000)
				
			}
		}
	}
</script>

<style>
	.running {
		width: 100%;
		height: 80%;
	}
</style>
